<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">vBox-User Manager</ui:define>
    <ui:define name="content">
        <h:form id="mainForm">
            <p:panel header="User Manager">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">
                        <p:commandButton value="New" actionListener="#{userBean.preNewAction()}">  
                            <p:ajax event="dialogReturn" update="mainForm" />  
                        </p:commandButton>
                        <p:commandButton value="Sửa" actionListener="#{userBean.preEditAction()}">  
                            <p:ajax event="dialogReturn" update="mainForm" />  
                        </p:commandButton>
                        <p:commandButton value="Delete" action="#{userBean.preDeleteAction()}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:button value="Home" outcome="/home"/>
                    </p:toolbarGroup>
                </p:toolbar>

                <p:dataTable var="user" value="#{userBean.userList}" paginator="true" rows="10"
                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                             rowsPerPageTemplate="10,20,30" rowKey="#{user.id}"
                             selection="#{userBean.selectedUsers}">
                    <f:facet name="header">User List</f:facet>
                    <p:column selectionMode="multiple" />
                    <p:column headerText="Username">
                        <h:outputText value="#{user.username}"/>  
                    </p:column>
                    <p:column headerText="Status">
                        <h:outputText value="Activated" rendered="#{user.activated}"/>
                        <h:outputText value="Inactive" rendered="#{!user.activated}"/>
                    </p:column>
                    <p:column headerText="Roles">
                        <ui:repeat value="#{user.roles}" var="role">
                            <h:outputText value="[#{role.name}] "/>
                        </ui:repeat>
                    </p:column>
                </p:dataTable>

                <p:dialog header="Info" widgetVar="deleteConfirmDialog" width="300" showEffect="explode" hideEffect="explode">
                    <h:panelGrid columns="1">
                        <f:facet name="header">
                            <h:outputText value="Do you want to delete this user?"/>
                        </f:facet>
                        <h:panelGroup>
                            <p:commandButton value="Yes" oncomplete="deleteConfirmDialog.hide()" update="mainForm" 
                                             actionListener="#{userBean.deleteAction()}"/>
                            <p:commandButton value="No" onclick="deleteConfirmDialog.hide()" type="button" />
                        </h:panelGroup>
                    </h:panelGrid>
                </p:dialog>

                <script type="text/javascript">
                    function handleDeleteRequest(xhr, status, args) {
                        if(args.validationFailed || args.invalid) {
                            ;  
                        } else {
                            deleteConfirmDialog.show();
                        }
                    }  
                </script>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>
